```svelte
<script lang="ts">
  import * as bottomSheet from "@zag-js/bottom-sheet"
  import { useMachine, normalizeProps } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(bottomSheet.machine, { id })
  const api = $derived(bottomSheet.connect(service, normalizeProps))
</script>

<div>
  <button {...api.getTriggerProps()}>Open Bottom Sheet</button>
  <div {...api.getBackdropProps()}></div>
  <div {...api.getContentProps()}>
    <div {...api.getGrabberProps()}>
      <div {...api.getGrabberIndicatorProps()}></div>
    </div>
    <div>
      <div {...api.getTitleProps()}>Add New Contact</div>
      <label>
        <span>Name</span>
        <input type="text" />
      </label>
      <label>
        <span>Email</span>
        <input type="email" />
      </label>
      <div>
        <button>Add Contact</button>
        <button onclick={() => api.setOpen(false)}>Cancel</button>
      </div>
    </div>
  </div>
</div>
```
